<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<!-- 顶部固定 -->
		<view slot="top">
			<u-tabs :list="tabList" :current="tabCurrent" :bar-style="{background: '#009175'}" gutter="150" active-color="#000" inactive-color="#666666" :is-scroll="false" @change="tabChange"></u-tabs>
		</view>
		<view style="padding:30rpx 30rpx 0 30rpx;">
			<view class="u-p-30 u-type-white-bg u-radius-10 u-m-b-20" v-for="(item,index) in dataList" :key="item.id" @click="$u.route('/pages/order/detail?order_num='+ item.order_num)">
				<view class="u-flex u-row-between u-col-center ">
					<view class="u-font-30">订单编号：{{item.order_num}}</view>
					<view class="u-font-24 u-font-bold">{{item.status_name}}</view>
				</view>
				<u-line color="#F5F5F5" margin="30rpx 0"></u-line>
				<view class="u-flex" v-for="(t,i) in item.goods_list" :key="t.id">
					<u-image width="195" height="185" :src="t.image" ></u-image>
					<view class="u-m-l-25">
						<view class="u-font-30 u-font-bold">{{t.goods_name}}</view>
						<view class="u-font-24 u-m-t-20 listItem u-w-400 " >
							<view class="u-line-1" v-for="(p,k) in t.sku_value" :key="k">{{p}}</view>
						</view>
					</view>
				</view>
				<u-line color="#F5F5F5" margin="30rpx 0" v-if="item.status == 4"></u-line>
				<view class="u-flex u-row-right" v-if="item.status == 4">
					<u-button type="success" shape="circle" :custom-style="{background: '#009175',fontSize: '26rpx',width: '180rpx',height: '60rpx'}" @click="$u.route('/pages/order/detail?order_num='+ item.order_num)">确认收货</u-button>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				tabCurrent: 0,
				tabList: [
					{
						id: 0,
						name: '全部	'
					},
					{
						id: 2,
						name: '待发货'
					},
					{
						id: 4,
						name: '待收货'
					},
					{
						id: 8,
						name: '已完成'
					}
				]
			};
		},
		onLoad({current}){
			this.tabCurrent  = current
			uni.$on('changeList',this.changeList)
		},
		onUnload(){
			uni.$off('changeList',this.changeList)
		},
		methods: {
			// tab切换
			tabChange(e){
				this.tabCurrent = e
				this.$refs.paging.reload()
			},
			// 重新刷新
			changeList(){
				this.$refs.paging.reload()
			},
			//请求数据
			queryList(pageNo) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				this.$u.api.myShopOrder({
					page: pageNo,
					status: this.tabList[this.tabCurrent].id
				}).then(res => {
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.ranking{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		font-size: 20rpx;
	}
	
	
	.listItem{
		color: #666666;
		line-height: 36rpx;
	}
</style>